<template>
  <div class="login-body">
    <div class="login-background"></div>
    <div class="login-panel">
      <h1>用户登录</h1>
      <el-form ref="formDataRef">
        <el-form-item prop="username">
          <el-input placeholder="请输入账号" v-model="loginInfo.username" size="large" type="text">
            <template #prefix>
              <el-icon>
                <User/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input placeholder="请输入密码" v-model="loginInfo.password" size="large" type="password"
                    @keyup.enter.native="login()">
            <template #prefix>
              <el-icon>
                <Lock/>
              </el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="">
          <div class="check-code-panel">
            <el-input placeholder="请输入验证码" v-model="loginInfo.captchaInput"
                      @keyup.enter="login"
                      style="width: 300px;margin-right: 30px"/>
            <el-image :src="captchaImageBase64Data" @click="getCaptcha" class="check-code" style="margin-top: 0"/>
          </div>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary" style="width: 100%;" @click="login()" size="large">登录</el-button>
        </el-form-item>
        <span>
          <RouterLink to="/user/reg">
            没账号的话点击此处注册
          </RouterLink>
        </span>
        <span style="float: right">
          <RouterLink to="/admin/login">
            管理员登录
          </RouterLink>
        </span>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import userApi from '@/api/userApi.js';
import {ref} from "vue";
import {Lock, ShoppingCartFull, User} from "@element-plus/icons-vue";
import {ElLoading, ElMessage, ElNotification} from "element-plus";
import {useRouter} from 'vue-router';
import {useTokenStore} from '@/stores/token.js';//使用store
import {useUserStore} from '@/stores/user.js';

const tokenStore = useTokenStore();
const userStore = useUserStore();
const router = useRouter();
//保存验证码
const captchaImageBase64Data = ref("");

const loginInfo = ref({
  username: '',
  password: '',
  key: '',
  captchaInput: '',
});

//获取验证码
function getCaptcha() {
  userApi.captcha()
      .then(resp => {
        loginInfo.value.key = resp.data.key
        //console.log(resp.data.captchaImageBase64Data)
        captchaImageBase64Data.value = resp.data.captchaImageBase64Data
      })
}

getCaptcha()

//登录
function login() {
  const loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.6)',
  })
  userApi.login(loginInfo.value)
      .then(resp => {
        loading.close()
        if (resp.code === 10000) {
          ElMessage.success(resp.msg);
          sessionStorage.setItem("token", resp.data)
          //保存token
          tokenStore.update(resp.data)
          //保存用户的信息
          getInfo()
          //跳转到前台的首页
          router.push('/user/index');
          ElNotification({
            title: 'Success',
            message: '登录成功0.0~~~',
            type: 'success',
          });
        } else {
          ElMessage.error(resp.msg);
        }
      });
}

//获取用户信息
function getInfo() {
  userApi.getInfo()
      .then(resp => {
        if (resp.code === 10000) {
          //将以登陆用户的信息保存在pinia里边
          userStore.updateUser(resp.data)
        }
      })
}
</script>

<style scoped>
h1 {
  margin-bottom: 10px;
}

.login-panel {
  position: absolute;
  margin: auto;
  padding: 25px;
  width: 26%;
  min-width: 460px;
  height: 30%;
  min-height: 300px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 1%;
  box-shadow: 2px 2px 10px #ddd;
}

.login-body {
  position: fixed; /* 或者使用 absolute，根据需要调整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-background {
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('D:/code/project2/mall/front/src/assets/banner/20211021142240_7114.jpg');
  background-size: cover;
  background-position: center;
}

</style>